<template>
  <el-form-item prop="rechargeAccountRegexId" class="common-form-width" label="充值账号名称">
    <el-select :model-value="modelValue" placeholder="请选择" @change="rechargeAccountRegexChange">
      <el-option :value="i.id" v-for="i in rechargeAccountRegexList" :label="i.name" :key="i.id"></el-option>
    </el-select>
    <span style="margin-left: 4px;color: #999;">正则：{{ modelRegx }}</span>
  </el-form-item>
</template>

<script setup lang="ts">
import sysConfigApi from "@/api/sysConfigApi";
interface IRechargeAccountRegexItem {
  id: number, placeHolder: string, regex: string, name: string
}
const props = withDefaults(
  defineProps<{
    modelValue: number | string;
    modelRegx: string;
    modelPlaceHolder: string;
  }>(),
  {
    modelValue: '',
    modelRegx: '',
    modelPlaceHolder: ''
  }
)

const rechargeAccountRegexList = ref<IRechargeAccountRegexItem[]>([])

const emits = defineEmits(['update:model-value', 'update:model-regx', 'update:model-placeHolder'])
const rechargeAccountRegexChange = (val: number | null) => {
  if (val != null) {
    const el = rechargeAccountRegexList.value.find(i => i.id == val)
    if (el) {
      emits('update:model-value', val)
      emits('update:model-regx', el.regex)
      emits('update:model-placeHolder', el.placeHolder)
    }

  }
}
//获取充值账号配置
const getRechargeAccountRegexList = async () => {
  const res = await sysConfigApi.getRegexList({})
  if (res.code == 200) {
    rechargeAccountRegexList.value = res.payload
  }
}

onMounted(() => {
  getRechargeAccountRegexList()
})
</script>
<style lang="scss" scoped></style>